<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
</head>
<body style=" overflow-x:hidden;">
<div class="layui-container">

    <form class="layui-row layui-form">

            <fieldset class="layui-elem-field  " style="margin-top: 20px;">
                <legend>客户区域信息</legend>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">区域名称</label>
                        <div class="layui-input-inline" style="width: 130px;">
                            <input type="text" name="qymc" autocomplete="off" class="layui-input" id="qymc">
                            <input type="hidden" name="khid"  id="khid" >
                            <input type="hidden" name="sfcz"  id="sfcz" value="1">

                            <input   type="hidden" name="isU"    id="isU"   >
                        </div>
                    </div>
                    <div class="layui-inline" >
                        <label class="layui-form-label"  >区域助记码</label>
                        <div class="layui-input-inline"  style="width: 130px;" >
                            <input type="text" lay-verify="" name="zjm" autocomplete="off" class="layui-input" id="zjm">
                        </div>
                    </div>


                    <div class="layui-inline">
                        <label class="layui-form-label">区域联系人</label>
                        <div class="layui-input-inline" style="width: 130px;">
                            <input type="text" name="lxr" autocomplete="off" class="layui-input" id="lxr">
                        </div>
                    </div>
                    <div class="layui-inline" >
                        <label class="layui-form-label"  >联系人电话</label>
                        <div class="layui-input-inline"  style="width: 130px;" >
                            <input type="text" lay-verify="" name="lxfs" autocomplete="off" class="layui-input" id="lxfs">

                        </div>
                    </div>

                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal "  style="position: absolute;right: 6%;width: 125px;"   id="addAreaInfo">添加客户区域</button>
                    </div>
                </div>
            <div class="layui-form-item">

                <script type="text/html" id="opera">


                    {{#  if( document.getElementById("isU").getAttribute("value") == "false" ){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled" disabled lay-event="up">下移</a>
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled" disabled lay-event="down">上移</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled lay-event="del">删除</a>
                    {{# }else  { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="up">下移</a>
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="down">上移</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    {{# } }}
                </script>

                <table id="areaInfo" lay-filter="areaInfo"></table>

            </div>

            </fieldset>

    </form>
</div>
<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    layui.use(['table','form','layer'],function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;
        var areaInfo;
        var currentPage = 1;
//role

        if($("#isU").val() == "false"){
            $("#addAreaInfo").attr("disabled",true);
            $("#addAreaInfo").addClass("layui-btn-disabled");
        }
        $("#close").on('click',function(){

            //当你在iframe页面关闭自身时
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });
        $.ajax({
            url: contextPath+"/area/"+$("#khid").val(),
            type: "GET",
            cellMinWidth: 80,
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                areaInfo = res.list;

                table.render({
                    elem:'#areaInfo'
                    ,limit:10
                    ,height:'full-185'
                    ,page: {
                        curr: currentPage //重新从第 1 页开始
                    } //开启分页
                    ,data: res.list
                    ,cols: [[
                        { type:'numbers', title: '序号',  align:'center', edit: 'text' }
                        ,{field:'qymc', title: '区域名称' ,align: 'center', edit: 'text'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{field:'zjm', title: '助记码', align: 'center', edit: 'text'} //单元格内容水平居中
                        ,{field:'lxr', title: '联系人',   align: 'center', edit: 'text'} //单元格内容水平居中
                        ,{field:'lxfs', title: '联系方式',   align: 'center', edit: 'text'}
                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                    ]]
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPage = curr;
                    }
                });
            }
        });
        $("#addAreaInfo").on('click',function(){
            $("input").css("border","");
            if($("#qymc").val()||$("#zjm").val()||$("#lxr").val()||$("#lxfs").val()){
                var content = {
                    "qymc":$("#qymc").val(),
                    "zjm":$("#zjm").val(),
                    "lxr":$("#lxr").val(),
                    "lxfs":$("#lxfs").val(),
                    "khid":$("#khid").val(),
                    "sfcz":$("#sfcz").val()
                };
            }else {
                layer.msg("客户区域信息不能为空！");
                return;
            }



            $.ajax({
                url: contextPath+"/area",
                type: "POST",
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify(content) ,
                dataType:"json",
                success: function(res) {
                    areaInfo = res.list;

                    newSuccessNoClose($,layer,res);
                    $.ajax({
                        url: contextPath+"/area/"+$("#khid").val(),
                        type: "GET",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            table.render({
                                elem:'#areaInfo'
                                ,page: {
                                    curr: currentPage //重新从第 1 页开始
                                } //开启分页

                                ,limit:10
                                ,height:'full-185'
                                ,cellMinWidth: 80
                                ,data: res.list
                                ,cols: [[
                                    { type:'numbers', title: '序号',  align:'center', edit: 'text' }
                                    ,{field:'qymc', title: '区域名称' ,align: 'center', edit: 'text'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                    ,{field:'zjm', title: '助记码', align: 'center', edit: 'text'} //单元格内容水平居中
                                    ,{field:'lxr', title: '联系人',   align: 'center', edit: 'text'} //单元格内容水平居中
                                    ,{field:'lxfs', title: '联系方式',   align: 'center', edit: 'text'}
                                    ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                                ]]
                                ,done: function(res, curr, count){
                                    //得到当前页码
                                    console.log(curr);
                                    currentPage = curr;
                                }
                            });

                        }
                    });

                }
            });

        });
        //监听单元格编辑

        table.on('edit(areaInfo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段

            $.ajax({
                url: contextPath+"/area",
                type: "PUT",
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify(data) ,
                dataType:"json",
                success: function(res) {

                }
            });
        });

        //监听工具条
        table.on('tool(areaInfo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'up'){

                $.ajax({
                    url: contextPath+"/area/up/"+$("#khid").val()+"/"+data.qyid,
                    type: "PUT",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        layer.msg(res.message);
                        $.ajax({
                            url: contextPath+"/area/"+$("#khid").val(),
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem:'#areaInfo'
                                    ,page: {
                                        curr: currentPage //重新从第 1 页开始
                                    } //开启分页
                                    ,cellMinWidth: 80
                                    ,limit:10
                                    ,height:'full-185'
                                    ,data: res.list
                                    ,cols: [[
                                        { type:'numbers', title: '序号',  align:'center', edit: 'text' }
                                        ,{field:'qymc', title: '区域名称' ,align: 'center', edit: 'text'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                        ,{field:'zjm', title: '助记码', align: 'center', edit: 'text'} //单元格内容水平居中
                                        ,{field:'lxr', title: '联系人',   align: 'center', edit: 'text'} //单元格内容水平居中
                                        ,{field:'lxfs', title: '联系方式',   align: 'center', edit: 'text'}
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPage = curr;
                                    }
                                });
                            }
                        });
                    }
                });
            } else if(layEvent === 'del'){
                layer.confirm('确定删除？', function(index){

                    $.ajax({
                        url: contextPath+"/area/"+data.qyid,
                        type: "DELETE",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            if(res.message == "删除成功！"){
                                obj.del(); //删除对应行（tr）的DOM结构
                            }
                            layer.msg(res.message);
                        }
                    });
                    layer.close(index);
                });
            }else if(layEvent === "down"){
                $.ajax({
                    url: contextPath+"/area/down/"+$("#khid").val()+"/"+data.qyid,
                    type: "PUT",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        layer.msg(res.message);
                        $.ajax({
                            url: contextPath+"/area/"+$("#khid").val(),
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem:'#areaInfo'
                                    ,page: {
                                        curr: currentPage //重新从第 1 页开始
                                    } //开启分页
                                    ,cellMinWidth: 80
                                    ,limit:10

                                    ,height:'full-185'
                                    ,data: res.list
                                    ,cols: [[
                                        { type:'numbers', title: '序号',  align:'center', edit: 'text' }
                                        ,{field:'qymc', title: '区域名称' ,align: 'center', edit: 'text'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                        ,{field:'zjm', title: '助记码', align: 'center', edit: 'text'} //单元格内容水平居中
                                        ,{field:'lxr', title: '联系人',   align: 'center', edit: 'text'} //单元格内容水平居中
                                        ,{field:'lxfs', title: '联系方式',   align: 'center', edit: 'text'}
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPage = curr;
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });

    });

</script>
</body>
</html>